<template>
  <el-container>
    <el-header>
      <img id="logo" src="@/assets/logo.png" alt />
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu :router="true" :default-active="$route.path" :default-openeds="['components']">
          <el-menu-item index="/">
            <i class="el-icon-info"></i>
            <span slot="title">介绍</span>
          </el-menu-item>
          <el-menu-item index="/install">
            <i class="el-icon-s-tools"></i>
            <span slot="title">安装</span>
          </el-menu-item>
          <el-submenu index="components">
            <template slot="title">
              <i class="el-icon-s-grid"></i>
              <span>组件</span>
            </template>
            <el-menu-item index="/swiper">轮播图</el-menu-item>
            <el-menu-item index="/card">卡片</el-menu-item>
            <el-menu-item index="/zoom">放大镜</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main><router-view /></el-main>
    </el-container>
  </el-container>
</template>

<style lang="scss">
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  font-size: 14px;
  line-height: 2em;
}
.cite {
  border-left: 10px solid #aaa;
  background-color: #f2f2f2;
  padding-left: 10px;
  color: #999;
}
#logo {
  width: 150px;
}
.el-container,
.el-aside,
.el-menu {
  height: 100%;
}
.el-header {
  background-color: #333;
}
.el-main {
  background-color: #f4f4f5;
}
.table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  thead {
    color: #999;
    th {
      border-bottom: 1px solid #eee;
      padding: 10px;
      text-align: left;
    }
  }
  tbody {
    tr:hover {
      background-color: #E7F4FE;
    }
    td {
      color: #666;
      vertical-align: top;
      padding: 10px;
      border-bottom: 1px solid #eee;
      li {
        list-style-type: circle;
        text-align: left;
      }
    }
  }
}
</style>
